<template>
  <screen-communal active="screen-statistic">
    <n-grid cols="4" x-gap="12">
      <n-gi>
        <n-flex vertical>
          <div class="e-chart-pack">
            <Base3DPieChart/>
          </div>
          <div class="e-chart-pack" style="height: 34rem">
            <p class="e-title hover-pointer" @click="handleScrollToKey">任务一览</p>
            <n-space vertical>
<!--              <n-space justify="space-around" class="lc-show-carts">-->
<!--                <div class="a-cart">-->
<!--                  <h3 class="cart-num">70</h3>-->
<!--                  <span class="cart-title">常规检测任务</span>-->
<!--                </div>-->
<!--                <div class="a-cart">-->
<!--                  <h3 class="cart-num">70</h3>-->
<!--                  <span class="cart-title">常规检测任务</span>-->
<!--                </div>-->
<!--              </n-space>-->
              <n-space justify="space-around" class="spase-pack">
                <div class="space-cart" v-for="(item) in tasks" :key="item.id">
                  <n-h3>{{ item.title }}</n-h3>
                  <n-p><span>{{item.num}}</span>{{item.unit}}</n-p>
                  <n-p>{{item.description}}<em>{{ item.content }}{{item.symbol}}</em></n-p>
                </div>
              </n-space>
              <div class="list-pack type-area">
                <n-virtual-list ref="virtualListInst" style="max-height: 18rem" :item-size="42" :items="items">
                  <template #default="{ item }">
                    <div :key="item.key" class="item" style="height: 42px">
<!--                      <img class="avatar" :src="item.avatar" alt="跑了~">-->
                      <n-space>
                        <span> {{ item.value }}</span>
                        <n-ellipsis><span> {{ item.details }}</span></n-ellipsis>
                        <span> {{ item.area }}</span>
                        <span> {{ item.type }}</span>
                      </n-space>
                    </div>
                  </template>
                </n-virtual-list>
              </div>
            </n-space>
          </div>
        </n-flex>
      </n-gi>
      <n-gi span="2">
        <div class="e-chart-map" style="background: transparent">
          <map-to-yu></map-to-yu>
        </div>
      </n-gi>
      <n-gi>
        <n-flex vertical>
          <div class="e-chart-pack">
            <bar-line-chart/>
          </div>
          <div class="e-chart-pack">
            <GradientCoverageLineChart/>
          </div>
          <div class="e-chart-pack">
            <StackBarChart/>
          </div>
        </n-flex>
      </n-gi>
    </n-grid>
  </screen-communal>
</template>

<script>
import {ref, defineComponent} from "vue";
import ScreenCommunal from "@/components/communal/screen-communal.vue";
//echarts图表组件导入
import MapToYu from "@/components/echarts/MapChart/MapToYu.vue";
import BaseLineChart from "@/components/echarts/LineChart/BaseLineChart.vue";
import GradientCoverageLineChart from "@/components/echarts/LineChart/GradientCoverageLineChart.vue";
import StackBarChart from "@/components/echarts/BarChart/StackBarChart.vue";
import BasePieChart from "@/components/echarts/PieChart/BasePieChart.vue";
import Base3DPieChart from "@/components/echarts/PieChart/Base3DPieChart.vue";
import BarLineChart from "@/components/echarts/BarChart/BarLineChart.vue";
import {getTaskOverview} from "@/request/api/dataPro.js";
export default defineComponent({
  name: "ScreenStatisticView",
  components: {
    ScreenCommunal,MapToYu,BaseLineChart,StackBarChart,BasePieChart,Base3DPieChart,
    GradientCoverageLineChart,BarLineChart
  },
  data(){
    let taskCart = [
      {id:'1',title:'任务总数',num:'',unit:'条',description:'成功率',content:'89.9',symbol:'%'},
      {id:'2',title:'完成总数',num:'',unit:'条',description:'成功率',content:'0',symbol:'%'},
      {id:'3',title:'未完成总数',num:'',unit:'条',description:'成功率',content:'0',symbol:'%'}
    ]
    return{
      tasks: ref(taskCart)
    }
  },
  mounted() {
    getTaskOverview().then((res)=>{
      this.tasks[0].num = res.data.incomplete
      this.tasks[1].num = res.data.processed
      this.tasks[2].num = res.data.totalReports
    })
  },
  setup(){
    const virtualListInst = ref();
    const avatars = [
      "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
      "https://avatars.githubusercontent.com/u/20943608?s=60&v=4",
      "https://avatars.githubusercontent.com/u/46394163?s=60&v=4",
      "https://avatars.githubusercontent.com/u/39197136?s=60&v=4",
      "https://avatars.githubusercontent.com/u/19239641?s=60&v=4"
    ];
    const tasks = Array.from({ length: 50 }, (_, i) => ({
      key: `${i}`,
      value: i,
      details:'巴南区-2023/2/18',
      area:'巴南区',
      type:'常规任务'
    }));
    function handleScrollToKey() {
      let timeKey=0
      let timer = setInterval(function () {
        if (timeKey<49){
          timeKey = timeKey + 1;
          virtualListInst.value?.scrollTo({ index: timeKey });
        }else {
          clearInterval(timer)
          timeKey=0
        }
      },1000)
    }
    return {
      items: ref(tasks),
      virtualListInst: ref(virtualListInst),
      handleScrollToKey: handleScrollToKey
    };
  }
})
</script>

<style lang="scss" scoped>
.lc-show-carts{
  .a-cart{
    background: linear-gradient(to top,rgba(85, 228, 231, 0.81),#ffffff00);
    width: 7rem;
    text-align: center;
  }
  .cart-num{
    color: rgb(152, 255, 253);
    font-size: 27px;
    font-weight: 500;
    margin: 0;
  }
}
.item {
  display: flex;
  align-items: center;
}
.avatar {
  width: 28px;
  border-radius: 50%;
  margin-right: 10px;
}
.spase-pack{
  position: relative;
  top: 16%;
  border-top: 1px solid #3968a3;
  margin: 0 7%;
  padding: 1.5rem .5rem;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: #ffffff10;
  .space-cart{
    font-size: 18px;
    h3,p{
      color: #45cff1;
    }
    span{
      font-size: 36px;
      color: #f1d95c;
    }
    em{
      color: #f1d95c;
    }
  }
}
</style>